<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <!--
          html 标签中 input
          el-input 组件的使用体验拉满 和 原生 input 框的使用姿势完全相同

          input、change 的区别
          input 是实时触发的事件；change 是在失焦后或者按下回车后会触发的事件（前提是值要改变）

          我们的需求 在用户输入后直接搜索  不需要二次操作（失焦 回车）  不可能是 change 事件
         -->
        <el-input
          v-model="keyword"
          style="margin-bottom: 10px"
          type="text"
          prefix-icon="el-icon-search"
          size="small"
          placeholder="输入员工姓名全员搜索"
          @input="search"
        />
        <!-- 树形组件 -->
        <el-tree
          ref="tree"
          node-key="id"
          highlight-current
          :expand-on-click-node="false"
          :data="treeList"
          :props="obj"
          default-expand-all
          @current-change="currentChange"
        />
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <!--
            如果想做按钮权限:
            1. 添加页面访问权之下的 按钮操作权(按钮标识非常重要 和代码中的一致)
            2. 找到代码中的按钮 v-if="$store.state.user.userInfo.roles?.points?.includes('按钮标识')"
          -->

          <!-- 判断一下 add-employee 是否存在于 points 中 -->
          <!-- <el-button v-if="$have('add-employee')" size="mini" type="primary" @click="$router.push('/employee/detail')">添加员工</el-button> -->
          <!-- <el-button v-if="$have('excel-import')" size="mini" @click="showImportDialog = true">excel导入</el-button> -->
          <el-button v-have="'add-employee'" size="mini" type="primary" @click="$router.push('/employee/detail')">添加员工</el-button>
          <el-button v-have="'excel-import'" size="mini" @click="showImportDialog = true">excel导入</el-button>
          <el-button size="mini" @click="exportExcel">excel导出</el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table :data="list">
          <el-table-column prop="staffPhoto" align="center" label="头像">
            <template #default="{ row }">
              <!-- {{ row.staffPhoto }} -->
              <!-- <img :src="row.staffPhoto" alt=""> -->
              <el-avatar v-if="row.staffPhoto" :src="row.staffPhoto" />
              <span v-else class="username">{{ row.username[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" />
          <el-table-column
            prop="mobile"
            align="center"
            label="手机号"
            sortable
          />
          <el-table-column
            prop="workNumber"
            align="center"
            label="工号"
            sortable
          />
          <el-table-column prop="formOfEmployment" label="聘用形式">
            <template #default="{ row }">
              {{ row.formOfEmployment === 1 ? "正式" : "试用" }}
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" align="center" label="部门" />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable />

          <el-table-column label="操作" width="280px">
            <template #default="{row}">
              <el-button size="mini" type="text" @click="$router.push('/employee/detail/' + row.id)">查看</el-button>
              <el-button size="mini" type="text" @click="assignRole(row.id)">角色</el-button>

              <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="del(row.id)">
                <el-button slot="reference" style="margin-left: 10px" size="mini" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            :current-page="page"
            :page-size="pagesize"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </div>

    <!-- <ImportDialog :show-import-dialog="showImportDialog" @xxx="showImportDialog = $event" /> -->
    <ImportDialog :show-import-dialog.sync="showImportDialog" />

    <el-dialog title="分配角色" :visible="showRoleDialog" @close="close">
      <el-checkbox-group v-model="roleCheckedList">
        <!-- 这边特别特殊! 多选框的value是由label属性提供的!!! -->
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>

      <template #footer>
        <el-button size="small" type="primary" @click="submit">确定</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import fileSaver from 'file-saver'
import ImportDialog from './components/import-dialog.vue'
import { getDepartmentList } from '@/api/department'
import { getEmployeeList, exportExcel, delEmployee, getEmployeeDetail, assignRole } from '@/api/employee'
import { getEnableRoleList } from '@/api/role'
import { findChildren } from '@/utils'

export default {
  name: 'Employee',
  components: {
    ImportDialog
  },
  data() {
    return {
      // code1: 'add-employee',
      // code2: 'excel-import',
      treeList: [], // 部门的树形数据
      obj: {
        label: 'name',
        children: 'child'
      },

      deptId: -1, // 右侧员工列表的数据完全取决于你点了哪个部门
      page: 1,
      pagesize: 10,
      keyword: '', // 收集用户输入的模糊关键词

      total: 0,
      list: [], // 员工的列表数据

      timer: null, // 记录定时器 id

      showImportDialog: false, // 控制导入对话框的显示隐藏

      showRoleDialog: false, // 控制分配角色的dialog

      roleList: [], // 启用的角色列表
      roleCheckedList: [], // 选中的角色们

      currentUserId: null // 正在操作的员工id 用于修改角色信息
    }
  },
  created() {
    this.getDepartmentList() // 获取部门列表
  },
  methods: {
    // have(str) {
    //   return this.$store.state.user.userInfo.roles?.points?.includes(str)
    // },
    async submit() {
      // 调用接口
      await assignRole(this.currentUserId, this.roleCheckedList)
      // 前端中页面没有要更新的地方
      this.$message.success('分配角色完成')
      this.close()
    },
    close() {
      // 这边本来是需要清空
      // 获取启用的角色列表 this.roleCheckedList = []
      // 由于打开dialog是请求结束后打开的 所以就可以省略这一步
      this.showRoleDialog = false
    },
    async assignRole(id) {
      const res = await getEnableRoleList()
      // console.log(res)
      this.roleList = res

      this.currentUserId = id // 原地存一份id  将来需要修改它的角色信息

      // 获取当前用户自己的角色列表(用于回显)
      const res2 = await getEmployeeDetail(id)
      // console.log(res2)

      this.roleCheckedList = res2.roleIds // 就是用户自己的角色信息  赋值给roleCheckedList

      this.showRoleDialog = true // 只有请求结束了 才能打开dialog
    },
    // 获取部门列表 =》 转树形数据 =》记录传智教育 id =》将传智教育高亮 =》 请求对应部门的员工列表
    async getDepartmentList() {
      // 请求发出去  封装接口请求（封装过了）
      const res = await getDepartmentList()
      // console.log(res) // 不管层级关系的列表数据 =》 树形数据（封装过递归）
      this.treeList = findChildren(res, 0) // 整个公司的 id 是 0
      this.deptId = res[0].id // 将最大部门传智教育的 id 记录下来  =》 将传智教育作为默认部门获取员工列表
      //  样式层面 将传智教育选中 setCurrentKey
      /*
        为了能够默认高亮选中传智教育：
          1. el-tree  添加 ref
          2. el-tree  添加 node-key="id"      要求：你给我一个唯一标识的字段名
          3. this.$refs.tree.setCurrentKey(1)   在视图更新之后调用 （没有视图结构 无法进行高亮）
          4. this.$nextTick  树形数据渲染到页面中 更新试图的动作 是异步的！
      */
      this.$nextTick(() => {
        // 表示视图更新完成
        this.$refs.tree.setCurrentKey(res[0].id)
      })

      // 请求员工数据
      this.getEmployeeList()
    },
    currentChange(current) {
      // 当前选中节点变化时触发
      // current 当前节点的数据
      this.deptId = current.id // 不仅要记录部门 id
      this.page = 1 // 切换部门 重置页码
      this.getEmployeeList()
    },
    async getEmployeeList() {
      const { total, rows } = await getEmployeeList({
        departmentId: this.deptId,
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.keyword // 携带关键词
      })
      // console.log(res2)
      this.total = total
      this.list = rows
    },
    handleCurrentChange(page) {
      this.page = page
      this.getEmployeeList()
    },
    search() {
      /*
        避免频繁触发：
          1. 防抖  多次触发 只管最后一次    =》 模糊搜索
              实现：关定时器 开定时器
          2. 节流  多次触发 只管第一次
      */
      clearTimeout(this.timer)

      this.timer = setTimeout(() => {
        // console.log('我要去模糊搜索了')
        this.page = 1 // 重置页码
        this.getEmployeeList() // 请求数据
      }, 300)
    },
    async exportExcel() {
      // 获取所有员工数据 =》 file-saver 导出一张 excel
      const res = await exportExcel()
      console.log(res) // 二进制文件流 接下来 file-saver 用于到处 excel 用
      // fileSaver.saveAs(blob 二进制文件流, '文件名.文件后缀') 导出文件
      fileSaver.saveAs(res, '公司全部员工信息表.xlsx')
    },
    async del(id) {
      // 二次确认 =》 调用接口 =》 前端重新获取数据 =》提示
      await delEmployee(id)

      // 带分页的删除 最后一条数据的情况 返回上一页
      if (this.list.length === 1 && this.page > 1) this.page--

      this.getEmployeeList()

      this.$message.success('删除成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin: 10px;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04c9be;
      font-size: 12px;
      display: inline-block;
    }
  }
}
</style>
